<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>去Ai化</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* 遮罩层 */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 2;
            width: 300px;
            text-align: center;
        }

        /* 关闭按钮 */
        .close-btn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
        }

        .close-btn:hover {
            background-color: #d32f2f;
        }

        body {
            padding: 20px;
            background: #fff;
        }

        .container {
            /* max-width: 1200px; */
            width: 100%;
            margin: 0 auto;
        }

        .tags {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .tag {
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 12px;
            background-color: #fff3dc;
            color: #ff9800;
        }

        .status {
            text-align: right;
            margin-bottom: 15px;
            color: #666;
        }

        .comparison {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .text-panel {
            flex: 1;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 15px;
            min-height: 300px;
            background: #fff;
        }

        .highlight {
            background-color: #e6ffe6;
            padding: 0 2px;
        }

        .char-count {
            text-align: right;
            color: #666;
            font-size: 12px;
            margin: 10px 0;
        }

        .stats {
            color: #666;
            font-size: 12px;
        }

        .buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .button {
            padding: 8px 20px;
            border: none;
            border-radius: 4px;
            background: #1a73e8;
            color: white;
            cursor: pointer;
            font-size: 14px;
        }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>
<body>
<div class="container">
    <div id="overlay" class="overlay" onclick="closeModal()"></div>

    <div id="modal" class="modal">
        <p id="message">消息弹窗</p>
        <!-- TODO: 调整消息弹窗样式 -->
        <button class="close-btn" onclick="closeModal()">关闭</button>
    </div>
    <div class="tags">
        <span class="tag">通用性违规</span>
        <span class="tag">广告违规内容</span>
        <span class="tag">自媒体平台违规内容</span>
    </div>

    <div class="comparison">
        <label for="input-content"></label><br>
        <textarea id="input-content" name="description" rows="10" cols="80" placeholder="请输入审核文案"></textarea><br><br>

    </div>
    <div class="comparison">
        <label for="output-content"></label><br>
        <textarea id="output-content" name="description" rows="10" cols="80" readonly placeholder=""></textarea><br><br>

    </div>

    <div class="buttons">
        <button class="button" onclick="humanize()">开始去Ai化</button>
        <button class="button" onclick="copyToClipboard()">复制结果</button>
    </div>
</div>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        new QWebChannel(parent.qt.webChannelTransport, function (channel) {
            Bridge = channel.objects.Bridge;

            Bridge.started.connect(function (msg) {
                showModal(msg)
            });
            Bridge.finished.connect(function (msg) {
                showModal(msg)
            });
            Bridge.failed.connect(function (msg) {
                showModal(msg)
            });
            Bridge.result.connect(function (content) {
                // TODO: 显示结果
            })

            window.humanize = function () {
                let text = document.getElementById("input-content").text;
                if (!desc || desc.trim() === '') {
                    showModal("请输入内容");
                    return;
                }
                return Bridge.humanize(text);
            }
        });

        window.copyToClipboard = function () {
            // 获取需要复制的内容
            const content = document.getElementById('output-content').textContent;

            // 创建一个临时的textarea元素
            const tempTextarea = document.createElement('textarea');
            tempTextarea.value = content;
            document.body.appendChild(tempTextarea);

            // 选中textarea中的内容
            tempTextarea.select();
            tempTextarea.setSelectionRange(0, content.length);

            try {
                // 执行复制操作
                document.execCommand('copy');

            } catch (err) {
            }

            // 移除临时的textarea元素
            document.body.removeChild(tempTextarea);
        }
        window.showModal = function (message) {
            document.getElementById("message").innerText = message;
            document.getElementById("overlay").style.display = "block";
            document.getElementById("modal").style.display = "block";
        };

        window.closeModal = function () {
            document.getElementById("overlay").style.display = "none";
            document.getElementById("modal").style.display = "none";
        };
    });

</script>
</body>
</html> 